<template>
  <!-- 表单 -->
  <el-form :model="formData" :rules="rules" label-width="120px">
    <el-form-item label="角色名称" prop="role_name">
      <el-input v-model="formData.role_name" style="width:90%" />
    </el-form-item>
    <el-form-item label="角色标识" prop="identify">
      <el-input v-model.trim="formData.identify" style="width:90%" />
    </el-form-item>
    <el-form-item label="角色描述" prop="description">
      <el-input v-model="formData.description" style="width:90%" />
    </el-form-item>
    <el-form-item label="角色权限" prop="authlist">
      <el-tree
        ref="permTree"
        :data="formData.authlist"
        show-checkbox
        node-key="id"
        :default-expanded-keys="openList"
        :default-checked-keys="selectCheck"
        :props="defaultProps"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import { addPermissionRole, editPersonPermission } from '@/api/permissions'
export default {
  name: 'StudyAdminFormrole',
  props: {
    menuList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      // list: [], // 权限列表
      formData: {
        description: '',
        identify: '',
        role_name: '',
        authlist: this.menuList
      },
      defaultProps: {
        children: 'children',
        label: 'permission_name'
      },
      rules: {
        permission_name: [{ required: true, message: '名称必须', trigger: 'blur' }],
        route: [{ required: true, message: '菜单标识必须', trigger: 'blur' }],
        permission_mark: [{ required: true, message: '标识必须', trigger: 'blur' }]
      },
      selectCheck: [], // 默认选中的树形节点
      openList: []// 默认展开的树形节点
    }
  },
  mounted() {
  },
  methods: {
    async addPermissionRole() {
      await addPermissionRole({
        ...this.formData, authlist: this.$refs.permTree.getCheckedKeys()
      })
      this.$message.success('添加成功')
      // this.formData = {
      //   description: '',
      //   identify: '',
      //   role_name: '',
      //   authlist: this.menuList
      // }
    },
    async editPersonPermission() {
      await editPersonPermission({ ...this.formData, authlist: this.$refs.permTree.getCheckedKeys() })
      this.$message.success('操作成功')
    }
  }
}
</script>

<style  scoped>
.KeepAlive{
  margin-left: 40px;
}
</style>
